import React, { useState } from 'react';

import { Button } from 'dw-mx';
import { Modal } from 'dw-mx';

import Type2Child from './Type2Child';

export default function Type3() {

    const [modal, updateModal] = useState({
        open: false,
        props: {}
    });

    const openModal = async () => {
        updateModal({
            open: true,
            props: {
                xm: '小明',
                age: 18
            }
        });
    };

    const closeModal = async (ret) => {
        updateModal({
            open: false,
            props: {}
        });

        alert(ret);
    };

    return <div>
        技术特点：
        <ul>
            <li>父页面中，通过 useState 中同时维护窗口的开关状态、打开窗口时要传递的参数</li>
            <li>Modal 写在<strong style={{color: "red"}}>父组件</strong>中，子组件保持独立</li>
        </ul>
        适用场景：
        <ul>
            <li>存在[父->子]传参（例如：弹出 RES 编辑 Table 当前行的信息）</li>
            <li>没有[子->父]传参</li>
        </ul>
        {
            modal.open && (
                <Modal
                    title="人员信息"
                    visible={true}
                    onOk={() => closeModal('ok')}
                    onCancel={() => closeModal('cancel')}
                >
                    <Type2Child {...modal.props}></Type2Child>
                </Modal>
            )
        }

        <Button onClick={() => openModal()}>弹出</Button>
    </div>;
}